import React, {PureComponent} from "react"
import "./index.less"
import GridItem from "./item"
import {Empty, Pagination} from "antd"


export default class GridView extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      viewId: undefined
    }
  }

  onCarouselClose = () => {
    this.setState(Object.assign({}, {viewId: undefined}))
  }

  onCarouselShow = (data) => {
    this.setState(Object.assign({}, {viewId: data.id}))
  }

  render() {
    const {dataSource, pagination, onChange, onAddFavorite} = this.props
    return dataSource
      ? <div className={'grid-view-container library-clothing-container'}>
        {
          dataSource.map((i, idx) => <GridItem key={idx}
                                               data={i}
                                               onAddFavorite={onAddFavorite(i)}
                                               onCarouselClose={this.onCarouselClose}
                                               onCarouselShow={this.onCarouselShow}
                                               carouselShow={this.state.viewId === i.id}/>)

        }
        {
          new Array(10).fill(1).map(i => <div className={'grid-view-item placeholder'}/>)
        }
        {
          dataSource && dataSource.length > 1
            ? <div className={'library-clothing-footer'}>
              <Pagination size={'small'} {...pagination} onChange={onChange}/>
            </div>
            : undefined
        }
      </div>
      : <div className={'library-clothing-container library-empty'}><Empty/></div>
  }
}